import React from 'react'

import { Modal, Button, Form, Input, Select, message } from 'antd'
import ModalFunc from '../../../components/modal/modal'
import AxiosUtils from '../../../commons/axios'
import { useDispatch } from 'react-redux';
import { getPmmlList } from '../../../redux/actions/pmml/pmmlAction'

// 表单布局
const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 12 },
};

const { Option } = Select

const NewModal = props => {

    const { visible, open, close } = ModalFunc()

    const [ form ] = Form.useForm()

    // 获取store对象中dispatch的引用
    const dispatch = useDispatch()

    function onOk () {
        form.submit()
    }

    // 检查字符串是否符合json格式
    function jsonFormatCheck(value) {
        let str = value.dataFormat.replace(/[\r\n\t]/g, "")
        try {
            let obj = JSON.parse(str)
            if (obj instanceof Object) {
                return false
            }
        } catch (error) {
            return true
        }
        return true
    }

    // 提交表单，更新列表状态
    function handleFinish (value) {
        if (jsonFormatCheck(value)) {
            message.warning("数据格式不符合JSON格式要求，请重新输入...")
            return
        }

        const url = "/model/file"
        AxiosUtils.ajaxPost({
            url: url,
            data: {
                params: value,
                isShowLoading: true
            },
            method: 'post'
        }).then(res => {
            if(res.code === 0) {
                message.success("创建成功！")
                /** 创建成功则更新卡片列表 */
                dispatch(getPmmlList(0))
                /** 关闭弹窗 */
                close()
                /** 清空表单缓存数据 */
                form.resetFields()
            }
        })
    }

    function renderForm() {
        return (
            <Form
                form={form}
                {...layout}
                preserve={false}
                wrapperCol={{ span: 16 }}
                layout="horizontal"
                size="large"
                onFinish={handleFinish}
            >
                <Form.Item 
                    name="name" 
                    label="文件名称"
                    rules={[
                        { required: true, message: '请输入文件名' }
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item 
                    name="description" 
                    label="描述信息"
                >
                    <Input.TextArea />
                </Form.Item>
                <Form.Item 
                    name="dataFormat" 
                    label="数据格式"
                    rules={[
                        { required: true, message: '请输入模型请求数据格式' }
                    ]}
                >
                    <Input.TextArea rows={4}/>
                </Form.Item>
                <Form.Item 
                    name="category" 
                    label="模型类型"
                    rules={[
                        { required: true, message: '请选择模型类型' }
                    ]}
                >
                    <Select>
                        <Option value={0}>pmml</Option>
                        <Option value={1}>spark</Option>
                        <Option value={3}>python</Option>
                    </Select>
                </Form.Item>
            </Form>
        )
    }

    return(
        <>
            <Button 
                type="primary"
                size="large"
                onClick={open}
            >
                新建
            </Button>
            <Modal
                title="新建模型"
                visible={visible}
                onOk={onOk}
                onCancel={close}
                width={450}
                maskClosable={false}
            >
                { renderForm() }
            </Modal>
        </>
    )
}

export default NewModal